<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cbnu jquery</title>
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
<style>
	body{
	background: #fff;
	font-family: Arial;
	height: 2000px;}
	ul#menu{
	position: fixed;
	top: 120px;
	left: 0px;
	z-index: 9999;
	list-style: none;
	margin: 0px;
	padding: 0px;}
	ul#menu li{
	width: 100px;
	margin-bottom: 2px;}
	ul#menu li a{
	background-color: #ccc;
	color: #fff;
	text-decoration: none;
	display: block;
	width: 90px;
	padding: 10px 0 10px 10px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	margin-left: -1px;
	opacity: 0.6;}
	
	ul#menu .cbnu1 a{
		background: #DD2B2F;}
	ul#menu .cbnu2 a{
		background: #FF8102;}
	ul#menu .cbnu3 a{
		background: #FFCC00;}
	ul#menu .cbnu4 a{
		background: #00CC99;}
	ul#menu .cbnu5 a{
		background: #3399CC;}
	ul#menu .cbnu6 a{
		background: #9900CC;}
	ul#menu .cbnu7 a{
		background: #CC99FF;}
	ul#menu .cbnu8 a{
		background: #000000;}
</style>
</head>
<body>
<ul id="menu">
		<li class="cbnu1"><a href="./template?page=newitem">학교안내</a></li>
		<li class="cbnu2"><a href="./template?page=top">입학안내</a></li>
		<li class="cbnu3"><a href="">대학/대학원</a></li>
		<li class="cbnu4"><a href="">산학협력/연구</a></li>
		<li class="cbnu5"><a href="">학사행정</a></li>
		<li class="cbnu6"><a href="">대학생활정보</a></li>
		<li class="cbnu7"><a href="">개신골광장</a></li>
		<li class="cbnu8"><a href="">홍보관</a></li>
	</ul>
	<script type="text/javascript">
		$(function () {
			$('#menu a').css('marginLeft','-85px');
			$('#menu>li').hover(
			function(){
				$('a',$(this)).stop().animate({'marginLeft':'-1px'},300);
			},
			function(){
				$('a',$(this)).stop().animate({'marginLeft':'-85px'},300);
			}
			);
		});
	</script>
	
<!-- <center>
<a href="./template?page=newitem">신상품</a><br><br>
<a href="./template?page=bestitem">인기상품</a><br><br>
</center> -->
</body>
</html>